import React from 'react'
import ReactEcharts from 'echarts-for-react';
import styles from './index.less'
import { Empty } from 'antd';
import { echartOption } from '@/utils/echartsUtils';
export interface Params {
  completeCount?: number
  totalItemCount?: number
  unlockItemCount?: number
  currentStars?: number
  itemCount?: number
  totalStars?: number
}
interface ItemCount {
  itemCountInfo: Params
}
export default function Summarize(props: ItemCount) {
  const { itemCountInfo } = props;
  const { completeCount, unlockItemCount } = itemCountInfo ?? {}

  const data1: any = []
  data1.push({ value: completeCount, name: '已完成条目', color: "green" })
  data1.push({ value: (unlockItemCount ?? 0) - (completeCount ?? 0), name: '未完成条目', color: "grey" })


  return (
    <div style={{ position: 'relative', flex: 1, width: "50%" }}>
      <div style={{ fontSize: '18px', fontWeight: 'bold', left: "50%", transform: 'translateX(-50%)', position: 'absolute' }}>条目完成率</div>
      {
        !unlockItemCount || unlockItemCount == 0 ? <Empty description={'条目还没有开始哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} /> : <>
          <ReactEcharts notMerge option={echartOption(data1)} style={{ margin: 'auto', minHeight: '400px' }} />
          <div className={styles.title_font} >已解锁{unlockItemCount}个条目</div>
        </>
      }
    </div>
  )
}


